<template>
  <div class="xtx-category-goods" v-for="sub in subList" :key="sub.id">
    <!-- 头部 -->
    <div class="xtx-category-goods-head">
      <!-- 更多的 -->
      <div class="xtx-category-goods-head__more">
        <More path="#" />
      </div>
      <!-- 标题 -->
      <h3 class="xtx-category-goods-head__title">- {{ sub.name }} -</h3>
      <!-- 描述 -->
      <p class="xtx-category-goods-head__desc">温暖柔软，品质之选</p>
    </div>
    <!-- 商品列表 -->
    <ul class="xtx-category-goods-list">
      <li
        class="xtx-category-goods-list-item"
        v-for="good in sub.goods"
        :key="good.id"
      >
        <GoodsItem :goods="good" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import More from '@/components/More.vue'
import GoodsItem from './GoodsItem.vue'
import { categoryAPI } from '@/api/category'
import { CategoryChildren } from '@/api/category/types.d'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({
  name: 'Goods'
})

const route = useRoute()

/** 二级列表 */
const subList = ref<CategoryChildren[]>()

const getSubList = (id: string): void => {
  categoryAPI(id)
    .then((res) => {
      console.log(res)
      subList.value = res.children
    })
    .catch((error) => {
      console.log(error)
    })
}

watch(
  () => route.params.id,
  (newVal) => {
    if (newVal && `category/${newVal as string}` === route.path) {
      getSubList(newVal as string)
    }
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.xtx-category-goods {
  padding: 20px 25px 0;
  margin-top: 20px;
  background-color: $basic-white;

  &-head {
    &__more {
      display: flex;
      justify-content: flex-end;
    }

    &__title {
      color: #666;
      font-size: 28px;
      font-weight: 400;
      text-align: center;
    }

    &__desc {
      margin-top: 20px;
      color: #999;
      font-size: 20px;
      text-align: center;
    }
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;

    &-item {
      padding: 0 10px;
      width: 220px;
      height: 320px;
    }
  }
}
</style>
